<!-- 门诊确诊 -->
<template>
    <div>
        <el-row>
            <el-col :span="24">
                <el-table :data="mrdiseaseList" style="width: 100%">
            <el-table-column label="疾病编码" prop="disease.diseaseCode" />
                    <el-table-column label="疾病名称" prop="disease.diseaseName" />
                    <el-table-column align="right">
                    <template #header>
                        <el-button size="small" @click="dialogVisible=true">
                        增加
                        </el-button>
                    </template>
                    <template #default="scope">
                        <el-button
                            size="small"
                            type="danger"
                            @click="handleDelete(scope.$index, scope.row)"
                        >
                            删除
                        </el-button>
                    </template>
                    </el-table-column>
                </el-table>
            </el-col>
        </el-row>
        

        <el-row style="margin-top:20px">
            <el-col :span="24">
                <el-form :model="form" label-width="auto" style="max-width: 600px">

                    <el-form-item label="注意事项">
                        <el-input v-model="form.careful" />
                    </el-form-item>
                    <el-form-item label="断诊结果">
                        <el-input v-model="form.diagnosis" />
                    </el-form-item>
                    <el-form-item label="理处意见">
                        <el-input v-model="form.cure" />
                    </el-form-item>
                    <el-form-item>
                        <el-button @click="saveRecord">保存</el-button><el-button>重置</el-button>
                    </el-form-item>
                </el-form>
            </el-col>
        </el-row>
        
    </div>

    <el-dialog v-model="dialogVisible" title="添加西医诊断" width="500" draggable>
        <el-row>
            <el-col :span="8">
                <el-input v-model="dieaseQuery.diseaseCode" placeholder="请输入编码搜索"/>
            </el-col>
            <el-col :span="8">
                <el-input v-model="dieaseQuery.diseaseName" placeholder="请输入疾病名称搜索"/>
            </el-col>
            <el-col :span="3">
                <el-button @click="searchDiease">搜索</el-button>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="24">
                <!-- 进行选择要添加的疾病 -->
                <el-table :data="dieaseList" stripe style="width: 100%" 
                @selection-change="handleSelectionChange">
                    <el-table-column type="selection"  width="55" />
                    <el-table-column prop="diseaseCode" label="疾病编码" width="180" />
                    <el-table-column prop="diseaseName" label="疾病名称" width="180" />
                </el-table>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="24">
                <el-button @click="addMrDisease">保存</el-button>
            </el-col>
        </el-row> 

    </el-dialog>
</template>

<script setup>
import httpRequest from '@/common';
import { ElMessage } from 'element-plus';
import {ref,getCurrentInstance, onMounted,defineProps,computed, watch} from 'vue';
import store from '@/store';
const {proxy} = getCurrentInstance();

// diseaseId: 20
// ​​
// medicalRecordId: 11

//删除疾病,只是将只有两个id的表给删除了，因为联查的时候，根据两个id的值来查出来这么多数据
    const handleDelete=(index,row)=>{
        console.log(row);
        proxy.$axios({
            method:'get',
            url:'/recorddisease/remove/'+row.medicalRecordId+'/'+row.diseaseId
        }).then(res=>{
            let resultBean=res.data;
            if(resultBean.code==200) {
                ElMessage.success('删除成功');
                getMrDiseaseList();
            } else {
                ElMessage.error('删除失败');
            }
        }).catch(error=>{
            ElMessage.error(error.message);
        })
    }

//获取父组件传递的registerId  挂号id
const props = defineProps({
    rid:{
        type: Number,
        required: true
    }
});

const form = ref({

})

//  进入该页面说明病例已经创建出来了   先查询该病例
//进入组件就进行查询
//根据挂号id(父组件传递过来的)  查询整个病历记录  包含了病历的id
const getRecordById = ()=>{

    httpRequest(
        proxy,
        'get',
        '/medicalrecord/register/'+props.rid,
        null,
        resultBean=>{
            form.value = resultBean.data;

            //查询病历对应的疾病
            getMrDiseaseList();
        }
    )

}

//病历对应的疾病列表
const mrdiseaseList = ref([])

/**
 * 根据刚才查询到的病历的id 查询对应的疾病
 */
const getMrDiseaseList = ()=>{
    httpRequest(
        proxy,
        'get',
        '/recorddisease/mrid/'+form.value.id,
        null,
        resultBean=>{
            mrdiseaseList.value = resultBean.data;

            //将选中的疾病名称串成字符串填写到表单的断针结果中
            let diseaseNames = [];
            mrdiseaseList.value.forEach(mrd=>{
                diseaseNames.push(mrd.disease.diseaseName)
            })
            form.value.diagnosis = diseaseNames.join(",");
        }
    )
}

//疾病搜索的条件
const dieaseQuery = ref({
    diseaseCode:'',
    diseaseName: ''
})

//疾病列表
const dieaseList = ref([])

//根据输入的疾病条件 code编码和疾病的名称来进行搜索
const searchDiease = ()=>{
    httpRequest(
        proxy,
        'post',
        '/disease/conditions',
        dieaseQuery.value,
        resultBean=>{
            dieaseList.value = resultBean.data;
        }
    )
}

const dialogVisible = ref(false);

//选中项的id集合
let selectOptions = ref([]);

//表格中多选框选中或取消时会触发  也就是选中项变化
//在选择多选框的时候，只是将疾病的id加入到这个集合中
const handleSelectionChange = (newSelection)=>{
    console.log('选中项改变',newSelection);
    selectOptions.value = []; //清空
    newSelection.forEach((selOp)=>{
        selectOptions.value.push(selOp.id);
    });
}

//去medical_record_disease表中添加数据
//这个表中只是记录了两个id值，一个是病的id还有一个是病例的id
//这里的发送网络的时候是一个的对象在接收的时候
const addMrDisease = ()=>{
    let mrDiseaseList = [];
    selectOptions.value.forEach(diseaseId=>{
        mrDiseaseList.push({
            medicalRecordId: form.value.id,
            diseaseId:diseaseId
        })
    })

    httpRequest(
        proxy,
        'post',
        '/recorddisease/addbatch',
        mrDiseaseList,
        resultBean=>{
            ElMessage.success('添加疾病成功');
            dialogVisible.value = false;
            getMrDiseaseList();
        }
    )
}

//保存病历信息
const saveRecord = ()=>{
    httpRequest(
        proxy,
        'post',
        '/medicalrecord',
        form.value,
        resultBean=>{
            ElMessage.success("保存成功");
        }
    )
}

// onMounted(()=>{
//     // 在onMounted中直接获取props中父组件的传值会获取不到  设置一个定时任务
//     setTimeout(()=>{
//         getRecordById();

        
//     },200);
// })



const activeTab = computed(()=>{
    return store.state.mrActiveTab;
})

watch(activeTab,(newValue,oldValue)=>{
    console.log('--------标签页切换了-------------------',newValue);
    if(newValue=='diagnosis'){
        getRecordById();
    }
},{
    immediate: true 
})

</script>

<style>
</style>